<template>
  <ul class="listContainer">
    <li class="musicItem" v-for="(item, index) in MusicListDetail" :key="index">
      <div class="leftMessage" @click="playMusic(index)">
        <span>{{ index + 1 }}</span>
        <div class="songMessage">
          <div class="songName">{{ item.name }}</div>
          <div class="songCreator">
            <div class="creator" v-for="(creator, index) in item.ar" :key="index">{{ creator.name }}</div>
          </div>
        </div>
      </div>
      <div class="mvIcon">
        <svg class="icon" aria-hidden="true" v-if="item.mv != 0" style="margin-right:15px">
          <use xlink:href="#icon-bofang"></use>
        </svg>
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-caidan1"></use>
        </svg>
      </div>

    </li>
  </ul>
</template>

<script>
import { mapMutations } from 'vuex'
export default {
  props: ['MusicListDetail'],
  methods: {
    playMusic(index) {
      this.updatePlayList(this.MusicListDetail)
      this.updatePlayListIndex(index)
      this.updatePlayStatus(true)
    },
    ...mapMutations(['updatePlayList', 'updatePlayListIndex', 'updatePlayStatus'])
  }
}
</script>

<style lang="less" scoped>
</style>